<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table {
            margin: auto;
            text-align:center;
            background:#3E444A ;
            width: 1350px;
            height: 500px;
        }
        td{

            height: 50px;
           color: #FFFFFF;
        }
    </style>
</head>
<body>
<table id="table" class="table">
    <tr>
        <td><label>
            <input type="checkbox" class="th">
        </label></td>
        <td style="color: #f5fbff">主键</td>
        <td style="color: #f5fbff">视频标题</td>
        <td style="color: #f5fbff">作者</td>
        <td style="color: #f5fbff">摘要图片</td>
        <td style="color: #f5fbff">封面图片</td>
        <td style="color: #f5fbff">价格</td>
        <td style="color: #f5fbff">评价</td>
        <td>首次创建时间</td>
        <td>最后修改时间</td>
        <td>操作</td>
    </tr>
    <tbody id="tbody">
    </tbody>
</table>
<script src="../script/ajax/ajax.js"></script>
<script >
onload=()=> {
    let tbody = document.querySelector('#tbody');
    ajax({
        url: '../static/font/ajax/work.json',
        success: res => {

            for (let i = 0, j = res.length; i < j; i++) {
                let tr = document.createElement('tr');

                let td01 = document.createElement('td');
                td01.innerHTML = `<input type="checkbox">`;
                if (i%2!==0){
                    td01.style['background-color']='#343A40'
                }
                else {
                    td01.style['background-color']='#3E444A'
                }

                let td02 = document.createElement('td');
                td02.innerHTML = res[i]['video-id'];

                if (i%2!==0){
                    td02.style['background-color']='#343A40'
                }
                else {
                    td02.style['background-color']='#3E444A'
                }

                let td03 = document.createElement('td');
                td03.innerHTML = res[i]['video-title'];

                if (i%2!==0){
                    td03.style['background-color']='#343A40'
                }
                else {
                    td03.style['background-color']='#3E444A'
                }

                let td04 = document.createElement('td');
                td04.innerHTML = res[i]['author'];

                if (i%2!==0){
                    td04.style['background-color']='#343A40'
                }
                else {
                    td04.style['background-color']='#3E444A'
                }

                let td05 = document.createElement('td');
                td05.innerHTML = res[i]['summary-image'];

                if (i%2!==0){
                    td05.style['background-color']='#343A40'
                }
                else {
                    td05.style['background-color']='#3E444A'
                }

                let td06 = document.createElement('td');
                td06.innerHTML = res[i]['cover-image'];

                if (i%2!==0){
                    td06.style['background-color']='#343A40'
                }
                else {
                    td06.style['background-color']='#3E444A'
                }

                let td07 = document.createElement('td');
                td07.innerHTML = res[i]['price'];

                if (i%2!==0){
                    td07.style['background-color']='#343A40'
                }
                else {
                    td07.style['background-color']='#3E444A'
                }

                let td08 = document.createElement('td');
                td08.innerHTML = res[i]['star'];

                if (i%2!==0){
                    td08.style['background-color']='#343A40'
                }
                else {
                    td08.style['background-color']='#3E444A'
                }
                let td09 = document.createElement('td');
                td09.innerHTML = res[i]['create-time'];

                if (i%2!==0){
                    td09.style['background-color']='#343A40'
                }
                else {
                    td09.style['background-color']='#3E444A'
                }
                let td10 = document.createElement('td');
                td10.innerHTML = res[i]['modify-time'];

                if (i%2!==0){
                    td10.style['background-color']='#343A40'
                }
                else {
                    td10.style['background-color']='#3E444A'
                }
                let td11 = document.createElement('td');
                td11.innerHTML = `<button type="button" style="background-color:#343A40;color: red;border-style: none">DELETE</button>
                                    <button type="button" style=" background-color:#343A40;color: dodgerblue;border-style:none ";>UPDATE</button>`
                if (i%2!==0){
                    td11.style['background-color']='#343A40'
                }
                else {
                    td11.style['background-color']='#3E444A'
                }
                tr.appendChild(td01);
                tr.appendChild(td02);
                tr.appendChild(td03);
                tr.appendChild(td04);
                tr.appendChild(td05);
                tr.appendChild(td06);
                tr.appendChild(td07);
                tr.appendChild(td08);
                tr.appendChild(td09);
                tr.appendChild(td10);
                tr.appendChild(td11);

            tbody.appendChild(tr);
        }
    }
    });
}
</script>
</body>
</html>